<template>
    <div>
        <a-calendar :defaultValue='default_value' @select='handle_select_time'>
            <div slot="dateCellRender" slot-scope="value" style='position: absolute;left: 0;right: 0;top: 0;bottom: 0;'>
                <!-- 设置任务的开始时间和结束时间 -->
                <div v-if="set_task_time(value)" class="badge-box"></div>
                <span v-if="set_push_time(value)" class="badge"></span>
            </div>
        </a-calendar>
        <div style='font-size: 12px; margin-top:20px;'>{{select_time}}</div>
        <div class="calendar-push-box">
            <div style='line-height: 2;'>
                <template v-if='list && list.length'>
                    <div v-for="(push, index) in list" :key='index'>
                        <span style='margin-right: 0.5em; color: #1890ff; font-weight: bold;'>{{push.sender}}</span>
                        <span style='margin-right: 0.5em;'>{{push.created_at}}</span>
                        <span style='margin-right: 0.5em;'>{{push.type}}</span>
                        <span v-if="push.type_id === 1">
                            备注：{{detail.remark || '暂无备注'}}
                        </span>
                        <span v-else-if="push.type_id === 22">
                            {{push.receiver}}您好，{{push.content}}
                        </span>
                        <span v-else>
                            {{push.content}}
                        </span>
                    </div>
                </template>
                <div v-else style='text-align: center;'>暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        props: {
            detail:{
                type: Object,
                default: () => {}
            },
            cycle: {
                type: Array,
                default: () => []
            },
            selected_times: {
                type: Array,
                default: () => []
            },
            push_list: {
                type: Array,
                default: () => []
            },
        },
        watch: {
            cycle: {
                handler(value){
                    this.time_cycle = value || []
                },
                deep: true
            },
            selected_times: {
                handler(value){
                    this.times = value || []
                },
                deep: true
            },
            push_list: {
                handler(value){
                    this.list = value || []
                },
                deep: true,
            }
        },
        data(){
            return {
                default_value: moment(),
                time_cycle: [],
                times: [],
                list: [],
                select_time: moment().format('YYYY-MM-DD')
            }
        },
        methods: {

            handle_select_time(e){
                this.select_time = e.format('YYYY-MM-DD')
                this.$parent.get_push_by_time(e)
            },

            set_task_time(e){
                const { time_cycle } = this
                if(time_cycle && time_cycle.length){
                    let time = new Date((e.format('YYYY-MM-DD'))).getTime(),
                        start_time = new Date(time_cycle[0]).getTime(),
                        end_time = new Date(time_cycle[1]).getTime()
                        let bool = Boolean(time >= start_time && time <= end_time)
                    return Boolean(time >= start_time && time <= end_time)
                }
                return false
            },

            set_push_time(e){
                let value = e.format('YYYY-MM-DD')
                return this.times.includes(value)
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>

<style lang='scss'>
    :global {
        .ant-fullcalendar-header{
            .ant-radio-group{
                display: none;
            }
        }

        .ant-fullcalendar-calendar-body{
            padding: 8px 0px;
        }
        
        .ant-fullcalendar{
            td{
                border: 1px solid #ebeef5;
            }
            .ant-fullcalendar-date{
                height: 40px;
                margin: -1px;
                border-top: none;
                overflow: hidden;
                position: relative;
                z-index: 1;
                .ant-fullcalendar-value{
                    position: relative;
                    z-index: 10;
                }
                .ant-fullcalendar-content{
                    .badge-box{
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        background: #bdaf00;
                    }
                    .badge{
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        display: inline-block;
                        padding: 0.4em 0.4em;
                        min-width: 10px;
                        border-radius: 18px;
                        background-color: #fa5151 !important;
                        color: #fff;
                        line-height: 1.2;
                        text-align: center;
                        font-size: 12px;
                        vertical-align: middle;
                    }
                }
            }
            .ant-fullcalendar-today{
                .ant-fullcalendar-date{
                    background-color: #1890ff;
                    .ant-fullcalendar-value{
                        color: #fff;
                    }
                }
            }
        }
    }
    .calendar-push-box{
        border: 1px solid #696969; 
        height: 100px; 
        overflow: auto; 
        margin-top:20px; 
        padding: 8px 12px;
        &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
            position: absolute;
            right: 0;

        }
        &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 4px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : rgba(72, 161, 250, 1);
        }
        &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 1px;
            background   : #ededed;
        }
    }
</style>